<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<style>
    table,tr,td{
        border: 1px solid red;
        border-collapse: collapse;/*合并边框*/
    }
    td{
        width: 120px;
        text-align: center; /*文本居中*/
    }

    .btn{
        width: 40px;
        text-align: center;
    }
</style>
<body>

<div id="app">
    <table>
        <tr>
            <td>商品标题</td>
            <td>商品价格</td>
            <td>商品库存</td>
            <td>购买数量</td>
            <td>商品小计</td>
        </tr>
        <tr>
            <td>python入门</td>
            <td>{{googds_price}}</td>
            <td>{{has_num}}</td>
            <td>
                <button @click="sub_num">-</button>
                <input class="btn" type="text" v-model="num">
                <button @click="add_num">+</button>
            </td>
            <!-- .toFixed(2) 保留两位小数 -->
            <td>{{(num * googds_price).toFixed(2)}}</td>
        </tr>

    </table>
</div>
<script>
    var vm = Vue.createApp({
        data(){
            return {
                num: 1,
                has_num: 5,
                googds_price: 29.98,
            }
        },
        methods:{
            sub_num(){
                if (this.num > 0){
                    this.num--
                }
            },
            add_num(){
                if (this.num < this.has_num){
                     this.num++
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>